<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<%@ page import="java.util.*"%>
<%@ page import="savi.classes.Accounts"%>

<%
	// See if user is logged in, if not we redirect them to the login page
	Accounts accounts = Accounts.inst();

	if (accounts.getUser() == null) {
		response.sendRedirect(accounts.getLoginPage("/home.jsp"));
		return;
	}

	// 	if (!accounts.modulesRetrieved()) {
	// 		response.sendRedirect(accounts.getLoginPage("/settings.jsp"));
	// 	}
%>

<html lang="en">
<head>
<meta charset="utf-8">
<title>StudyBuddy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="StudyBuddy">
<meta name="author" content="TeamOS">

<!-- Le styles -->
<link href="./css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
<link href="./css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon" href="ico/apple-57x57.png">
<html lang="en">
<head>
<meta charset="utf-8">
<title>StudyBuddy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="StudyBuddy">
<meta name="author" content="TeamOS">

<!-- Le styles -->
<link href="./css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
	padding-top: 60px;
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}

#scrollbar1 {
	width: 520px;
	clear: both;
	margin: 20px 0 10px;
}

#scrollbar1 .viewport {
	width: 500px;
	height: 200px;
	overflow: hidden;
	position: relative;
}

#scrollbar1 .overview {
	list-style: none;
	position: absolute;
	left: 0;
	top: 0;
}

#scrollbar1 .thumb .end,#scrollbar1 .thumb {
	background-color: #003D5D;
}

#scrollbar1 .scrollbar {
	position: relative;
	float: right;
	width: 15px;
}

#scrollbar1 .track {
	background-color: #D8EEFD;
	height: 100%;
	width: 13px;
	position: relative;
	padding: 0 1px;
}

#scrollbar1 .thumb {
	height: 20px;
	width: 13px;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	top: 0;
}

#scrollbar1 .thumb .end {
	overflow: hidden;
	height: 5px;
	width: 13px;
}

#scrollbar1 .disable {
	display: none;
}
</style>
<link href="./css/bootstrap-responsive.css" rel="stylesheet">

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="ico/favicon.ico">
<link rel="apple-touch-icon" href="ico/apple-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="ico/apple-72x72.png">
<link rel="apple-touch-icon" sizes="114x114"
	href="ico/apple-114x114.png">
</head>

<body>

	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand" href="#">StudyBuddy</a>
				<div class="nav-collapse">
					<ul class="nav">
						<li class="active"><a href="#"><i
								class="icon-home icon-white"></i> Home</a></li>
						<li><a href="/browse.jsp"><i
								class="icon-folder-open icon-white"></i> Browse</a></li>
						<li><a href="/archive.jsp"><i
								class="icon-warning-sign icon-white"></i> Archive</a></li>
						<li><a href="/settings.jsp"><i
								class="icon-cog icon-white"></i> Settings</a></li>
						<li><a href="javascript:logout();">Logout</a></li>
					</ul>
					<p class="navbar-text pull-right">
						Logged in as <a href="#"> <%
 	out.println(accounts.getUserName());
 %></a>
					</p>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span4">
				<div class="well sidebar-nav">
					<ul class="nav nav-list">
						<li class="nav-header">Suggested Events</li>
						<div id="mySuggestedEventsElements"
							name="mySuggestedEventsElements">
							<!-- 							<li> -->
							<!-- 								<form> -->
							<!-- 									<div class="btn-toolbar"> -->
							<!-- 										<div class="btn-group"> -->
							<!-- 											<input id="uniqueeventID" type="hidden" value="eventid"> <a -->
							<!-- 												class="btn disabled" name="moduleEvent" id="moduleEvent" -->
							<!-- 												title="Module Code">Module</a> <a class="btn disabled" -->
							<!-- 												name="locationEvent" id="locationEvent" title="Location">Type -->
							<!-- 												</a> <a class="btn disabled" name="startEvent" id="startEvent" -->
							<!-- 												title="Start Time">Time</a> -->
							<!-- 										</div> -->
							<!-- 										<div class="btn-group pull-right"> -->
							<!-- 											<button class="btn"  -->
							<!-- 											href="javascript:doGetDetails(document.getElementById(#uniqueeventID).value);" -->
							<!-- 											name="editEvent" -->
							<!-- 												id="editEvent" title="Edit event details"> -->
							<!-- 												<i class="icon-pencil icon-white"></i> -->
							<!-- 											</button> -->
							<!-- 										</div> -->
							<!-- 									</div> -->
							<!-- 								</form> -->
							<!-- 							</li> -->
						</div>
						<li class="active"><a href="#">Link</a></li>
					</ul>
				</div>
				<!--/.well -->
				<div class="well sidebar-nav">
					<ul class="nav nav-list">
						<li class="nav-header">My Events</li>
					</ul>
				</div>
				<!--/.well -->
			</div>
			<!--/span-->
			<div class="span4">
				<div class="hero-unit-middle">
					<h1>Description</h1>
					<p></p>
					<div class="alert alert-error">
						<p>Details of the current event is displayed here</p>
					</div>
					<p>
						<a class="btn btn-inverse btn-large">Leave</a>
					</p>
					<p>
						<a class="btn btn-primary btn-large">Join</a>
					</p>
					<div class="progress progress-danger progress-striped active">
						<div class="bar" style="width: 40%;">Loading ...</div>
					</div>
				</div>
			</div>
			<!--/span-->
			<div class="span4">
				<div class="well sidebar-nav">
					<div class="alert alert-info-time">
						<br />
						<div class="alert alert-info" style="text-align: center;">
							<span id="date"></span> <span id="day"></span> <span id="clock"></span>
						</div>
					</div>

					<ul class="nav nav-list">
						<li class="nav-header">My Events</li>
						<li><a class="btn btn-success pull-right" name="createEvent"
							id="createEvent"
							title="Create an event - study groups, consultations, etc."
							href="http://sharvyis.appspot.com/create.jsp"><i
								class="icon-plus icon-white"></i> Create</a></li>
						<div id="myEventsElements" name="myEventsElements"></div>
					</ul>

				</div>
				<!--/.well -->
			</div>
			<!--/row-->
		</div>
		<hr>

		<footer> <jsp:include page="./footer.jsp" /> </footer>

	</div>
	<!--/.fluid-container-->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="./js/tests/vendor/jquery.js"></script>
	<script src="./js/bootstrap-transition.js"></script>
	<script src="./js/bootstrap-alert.js"></script>
	<script src="./js/bootstrap-modal.js"></script>
	<script src="./js/bootstrap-dropdown.js"></script>
	<script src="./js/bootstrap-scrollspy.js"></script>
	<script src="./js/bootstrap-tab.js"></script>
	<script src="./js/bootstrap-tooltip.js"></script>
	<script src="./js/bootstrap-popover.js"></script>
	<script src="./js/bootstrap-button.js"></script>
	<script src="./js/bootstrap-collapse.js"></script>
	<script src="./js/bootstrap-carousel.js"></script>
	<script src="./js/bootstrap-typeahead.js"></script>
	<script src="./js/index.js"></script>
	<script src="./js/create.js"></script>
</body>
</html>